/* eslint-disable @typescript-eslint/no-use-before-define */
import { DictValueEnum } from "@/components/DictTag";
import {
	DrawerForm,
	ProFormDigit,
	ProFormInstance,
	ProFormRadio,
	ProFormSelect,
	ProFormText,
	ProFormTreeSelect
} from "@ant-design/pro-components";
import { Avatar, Space, Typography } from "antd";
import React, { useEffect, useRef, useState } from "react";
import { formTitle } from "../constants";
import { getDept, getList } from "@/services/api/module/system/dept";
import { search } from "@/services/api/module/system/user";
export type DeptFormData = Record<string, unknown> & Partial<API.Setting.DeptBo>;
export type DeptFormProps = {
	onCancel: (flag?: boolean) => void;
	onSubmit: (values: any) => Promise<boolean>;
	open: boolean;
	id: number | undefined;
	statusOptions: DictValueEnum;
};
const DeptForm: React.FC<DeptFormProps> = props => {
	const formRef = useRef<ProFormInstance>();
	const [title, setTitle] = useState(formTitle[0]);
	const [showSelectParent, setShowSelectParent] = useState(true);
	const { statusOptions, id, open, onCancel, onSubmit } = props;
	useEffect(() => {
		formRef?.current?.resetFields();
		if (id) {
			setTitle(formTitle[1]);
			setFormValue(id);
		}
	}, [id]);

	// 表单赋值
	const setFormValue = (id: number) => {
		getDept(id).then(data => {
			console.log(data);
			setShowSelectParent(data?.parentId === 0 ? false : true);
			formRef.current?.setFieldsValue(data);
		});
	};

	//关闭
	const handleCancel = () => {
		setTitle(formTitle[0]);
		onCancel();
	};
	//回调
	const handleFinish = async (values: Record<string, any>) => {
		return onSubmit({
			...values,
			id: id ? id : undefined,
			parentId: !showSelectParent ? 0 : values?.parentId
		} as DeptFormData);
	};

	return (
		<>
			<DrawerForm<DeptFormData>
				width={430}
				title={title}
				open={open}
				formRef={formRef}
				grid={true}
				layout="vertical"
				drawerProps={{
					destroyOnClose: true,
					onClose: () => {
						handleCancel();
					}
				}}
				onFinish={handleFinish}
			>
				{showSelectParent && (
					<ProFormTreeSelect
						name="parentId"
						label="上级部门"
						secondary
						fieldProps={{
							fieldNames: {
								label: "deptName",
								value: "id"
							}
						}}
						allowClear
						request={async () => {
							return getList().then((res: any) => {
								return res.data;
							});
						}}
						placeholder="请选择上级部门"
						rules={[
							{
								required: true,
								message: "请选择上级部门"
							}
						]}
					/>
				)}

				<ProFormText
					name="deptName"
					colProps={{ md: 24, xl: 24 }}
					label="部门名称"
					placeholder="请输入部门名称"
					rules={[
						{
							required: true,
							message: "请输入部门名称！"
						}
					]}
				/>
				<ProFormSelect
					name="leader"
					label="部门负责人"
					allowClear
					colProps={{ md: 24, xl: 24 }}
					fieldProps={{
						showSearch: true,
						fieldNames: {
							label: "realName",
							value: "id"
						},
						onChange: (value, option) => {
							// @ts-ignore
							formRef?.current?.setFieldValue("phone", option?.phonenumber);
							// @ts-ignore
							formRef?.current?.setFieldValue("email", option?.email);
						},
						optionRender: option => {
							return (
								<Space>
									<Avatar style={{ backgroundColor: "#1e90ff" }}>{option.data?.realName?.charAt(0)}</Avatar>
									<Typography.Text ellipsis strong>
										{option.data?.realName}
									</Typography.Text>
								</Space>
							);
						}
					}}
					debounceTime={1000}
					request={async params => {
						// if (params?.keyWords) {
						return search({ realName: params?.keyWords }).then((res: any) => {
							return res.data;
						});
						// }
					}}
					rules={[
						{
							required: true,
							message: "请选择部门负责人!"
						}
					]}
				/>

				<ProFormText
					name="phone"
					colProps={{ md: 24, xl: 24 }}
					label="联系电话"
					placeholder="请输入联系电话"
					rules={[
						{
							required: false,
							message: "请输入联系电话！"
						},
						{
							pattern: /^1\d{10}$/,
							message: "手机号格式错误！"
						}
					]}
				/>
				<ProFormText
					name="email"
					colProps={{ md: 24, xl: 24 }}
					label="邮箱"
					placeholder="请输入邮箱"
					rules={[
						{
							required: false,
							message: "请输入邮箱！"
						},
						{
							type: "email",
							message: "请输入正确的邮箱"
						}
					]}
				/>

				<ProFormRadio.Group
					colProps={{ md: 24, xl: 24 }}
					valueEnum={statusOptions}
					name="status"
					label={"部门状态"}
					initialValue={"0"}
					placeholder="请输入部门状态"
					rules={[
						{
							required: true,
							message: "请输入部门状态！"
						}
					]}
				/>
				<ProFormDigit
					min={0}
					colProps={{ md: 24, xl: 24 }}
					max={9999}
					name="sort"
					label="显示顺序"
					initialValue={0}
					placeholder="请输入显示顺序"
					rules={[
						{
							required: true,
							message: "请输入显示顺序！"
						}
					]}
				/>
			</DrawerForm>

			{/* <DeptSelectDialog
        multiple={false}
        open={deptOpen}
        onConfirm={(values) => {
          console.log(values);
          formRef?.current?.setFieldValue('leader', values[0]?.realName);
          formRef?.current?.setFieldValue('leaderId', values[0]?.id);
          formRef?.current?.setFieldValue('phone', values[0]?.phonenumber);
          formRef?.current?.setFieldValue('email', values[0]?.email);
          setDeptOpen(false);
        }}
        onCancel={() => {
          setDeptOpen(false);
        }}
      /> */}
		</>
	);
};

export default DeptForm;
